<template>
  <div class="app-container" style="height: 100%">
    <div class="app-container-inner" style="display: flex; flex-direction: column; flex: 1">
      <div class="main">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="switchTab">
          <div style="display: flex; flex-direction: column; flex: 1">
            <el-tab-pane label="知识库类型" name="knowType">
              <KnowType ref="knowTypeCard" />
            </el-tab-pane>
            <el-tab-pane label="电子说明书" name="instro">
              <InsCard ref="insCard" />
            </el-tab-pane>
            <el-tab-pane label="在线视频" name="video">
              <VideoCard ref="videoCard" />
            </el-tab-pane>
            <el-tab-pane label="故障库" name="fault">
              <FaultModule ref="faultDom" />
            </el-tab-pane>
            <el-tab-pane label="企业公告" name="notice">
              <NoticeCard />
            </el-tab-pane>
          </div>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import KnowType from './components/knowType/index.vue'
  import InsCard from './components/InsCard/index.vue'
  import VideoCard from './components/VideoCard/index.vue'
  import NoticeCard from './components/NoticeCard/index.vue'
  import FaultModule from './components/faultModule/index.vue'
  import { ref } from 'vue'
  import type { TabsPaneContext } from 'element-plus'
  import pageComponentName from '@/config/page-component-name'

  defineOptions({
    name: pageComponentName.know.know,
  })

  const activeName = ref('knowType')

  const knowTypeCard = ref()
  const insCard = ref()
  const videoCard = ref()
  const faultDom = ref()

  // 切换导航
  const switchTab = (tab: TabsPaneContext) => {
    if (tab.props.name == 'knowType') {
      knowTypeCard.value.getList()
    }
    if (tab.props.name == 'instro') {
      insCard.value.getList()
    }
    if (tab.props.name == 'video') {
      videoCard.value.getList()
    }
    if (tab.props.name == 'fault') {
      faultDom.value.getAllData()
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
